<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="导出时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
				<el-table-column label="文件名称" align="center" prop="file_path" />
				<el-table-column label="操作人" align="center" prop="admin_username" />
				<el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-button type="primary" @click="onDownloadFile(row)" link>下载</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="orderExportRecord">
import { onMounted, reactive } from 'vue';
import { orderApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';
import { handleDownloadByName } from '/@/utils/utils';

const OrderApi = orderApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		time: [],
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
});

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// 下载文件
const onDownloadFile = (row: any) => {
	handleDownloadByName(row.file_url, '', false);
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_orderExportFileList(state.queryParams);
};
// 导入时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};

/********** 网络事件 **********/
// 导出订单记录
const _orderExportFileList = (params: Object) => {
	OrderApi.orderExportFileList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
</script>
